.action-recorder {
    &-panel {
        position: fixed;
        bottom: 80px;
        width: 512px;
        height: 64px;
        border-radius: var(--border-radius-xl);
        background-color: rgb(var(--bg-color-secondary));
        z-index: 1000;
        left: 50%;
        transform: translateX(-50%);
        box-shadow: var(--box-shadow-lg);
        padding-left: var(--padding-xl);
        padding-right: var(--padding-xl);
        display: flex;
        align-items: center;

        &-icon {
            flex-grow: 0;
            flex-shrink: 0;
            font-size: var(--font-size-xxl);
            width: var(--font-size-xxl);
            height: var(--font-size-xxl);
            margin-right: var(--margin-xs);

            @keyframes recording {
                0% {
                    color: rgb(var(--text-color));
                }

                40% {
                    color: red;
                }

                60% {
                    color: red;
                }

                100% {
                    color: rgb(var(--text-color));
                }
            }

            &-recording {
                > svg > g > path:first-of-type {
                    animation: recording 2s infinite;
                }
            }
        }

        &-title {
            flex-grow: 1;
            font-size: var(--font-size-xs);
        }

        &-actions {
            display: flex;
            flex-grow: 0;
            flex-shrink: 0;
            width: 260px;
            justify-content: space-between;

            > button {
                width: 80px;
            }
        }
    }
}
